<template>
  <view class="register">
    <nav-custom :showSearch="false"></nav-custom>
    <view class="content">
      <!-- 头部logo -->
      <view class="header">
        <image :src="logoImage"></image>
      </view>
      <!-- 主体 -->
      <view class="main">
        <wInput v-model="username" type="text" maxlength="11" placeholder="用户账号"></wInput>
        <wInput v-model="password" type="password" maxlength="15" placeholder="密码" isShowPass></wInput>
        <wInput v-model="rightValue" type="password" maxlength="15" placeholder="确认密码" isShowPass></wInput>
      </view>
      <wButton class="wbutton" text="注 册" :rotate="isRotate" @click="handleRegister"></wButton>
      <!-- 底部信息 -->
      <view class="footer">
        <text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'"> 同意</text>
        <!-- 协议地址 -->
        <navigator url="" open-type="navigate">《协议》</navigator>
      </view>
    </view>
  </view>
</template>

<script>
  import wInput from '../components/watch-login/watch-input.vue' //input
  import wButton from '../components/watch-login/watch-button.vue' //button

  export default {
    data() {
      return {
        //logo图片
        logoImage: '../../static/bestCake-logo.jpg',
        username: '', // 用户/电话
        password: '', //密码
        rightValue: '', //确认密码
        showAgree: true, //协议是否选择
        isRotate: false, //是否加载旋转
      }
    },
    components: {
      wInput,
      wButton,
    },
    methods: {
      isShowAgree() {
        //是否选择协议
        this.showAgree = !this.showAgree;
      },
      handleRegister() {
        const {
          username,
          password,
          rightValue,
        } = this
        if (password !== rightValue) {
          uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'none'
          })
        }
        if (username && password && rightValue) {
          this.$H.post(`/1.1/users`, {
            username,
            password
          }).then(res => {
            if (res.statusCode == 201) {
              this.$store.commit('user/saveUserInfo', res.data)
              console.log(res);
              uni.navigateBack({
                delta: 2,
                success: () => {
                  this.$store.commit('cart/changeLoginShow', false)
                  uni.showToast({
                    title: '登录成功',
                    icon: 'none'
                  })
                }
              })
            }
          }).catch((err) => {
            console.log(err);
            err.data.code == 211 && uni.showToast({
              title: '账号或密码错误',
              icon: 'none',
            })
          })
        } else {
          uni.showToast({
            title: '请填写账号和密码',
            icon: 'none'
          })
        }
      },
    }
  }
</script>

<style>
  @import url("../components/watch-login/css/icon.css");
  @import url("./css/main.css");
</style>
